<!--
 * 404
 * @author: zhaoyahui
 * @since: 2023-09-06
 * 404.vue
-->
<template>
  <div class="main-content">
    <a-card :bordered="false">
      <a-result status="404" :subtitle="subtitle">
        <template #extra>
          <a-space>
            <a-button type="outline" @click="handleBack()">返回首页</a-button>
          </a-space>
        </template>
      </a-result>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStoreHook } from '@/store/modules/user'
import { useTagsViewStore } from '@/store/modules/tagsView'
const tagsViewStore = useTagsViewStore()
const userStore = useUserStoreHook()
const route = useRoute()
const router = useRouter()

const subtitle = ref('')
const unAuthMenu = async () => {
  // 判断是否有权限
  if (!userStore.unAuthMenu.length) {
    await userStore.getUnAuthMenu()
  }
  const findIndex = userStore.unAuthMenu.find((item) => {
    return ('/' + item.path).indexOf(route.path) !== -1
  })
  if (findIndex) {
    subtitle.value = '您无权访问此页面'
  } else {
    subtitle.value = '您访问的页面不存在'
  }
}
unAuthMenu()
const handleBack = () => {
  tagsViewStore.delView(route).then(() => {
    router.push('/dashboard')
  })
}
</script>
